<template>
  <div class="container">

    <el-select v-model="selectedValue" filterable remote reserve-keyword :remote-method="remoteMethod"
      :loading="loading" placeholder="请输入关键词" class="large-select">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>


  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  name: 'LargeDataSelect',
  setup() {
    const options = ref([])
    const loading = ref(false)
    const selectedValue = ref('')

    // 生成模拟数据
    const generateOptions = () => {
      const data = []
      for (let i = 1; i <= 5000; i++) {
        data.push({
          value: i,
          label: `选项 ${i} - 描述文本 ${Math.random().toString(36).substring(2, 8)}`
        })
      }
      return data
    }

    // 远程搜索方法
    const remoteMethod = (query) => {
      if (query) {
        loading.value = true
        setTimeout(() => {
          loading.value = false
          options.value = generateOptions().filter(item =>
            item.label.toLowerCase().includes(query.toLowerCase())
          )
        }, 200)
      } else {
        options.value = generateOptions().slice(0, 2000) // 初始只加载100条
      }
    }

    onMounted(() => {
      // 初始加载部分数据
      options.value = generateOptions().slice(0, 2000)
    })

    return {
      options,
      loading,
      selectedValue,
      remoteMethod
    }
  }
}
</script>

<style scoped>
.large-select {
  width: 100%;
  max-width: 400px;
}

.container {
  padding: 20px;
}
</style>